<template>
  <div class="index-container">
    <el-page-header
      class="detailheader"
      content="管理 / 申报管理"
      :icon="ArrowLeft"
      @back="goBack"
    />
    <el-row
      v-infinite-scroll="() => fetchData()"
      class="page-list"
      infinite-scroll-immediate="false"
      style="overflow: auto"
    >
      <el-col
        :lg="{ span: 18, offset: 3 }"
        :sm="{ span: 20, offset: 2 }"
        :xs="{ span: 22, offset: 1 }"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          v-long-press="(e) => longPress(e, item)"
          class="item"
          @click="() => showDetail(item)"
        >
          <div class="row1">
            <div class="row1-1">
              <el-checkbox
                v-if="showSelect"
                @change="(value) => handchange(value, item.thirdNo)"
                @click.stop=""
              />
              <ww-open-data :openid="item.reqUserid" type="userName" />
              <span>{{ formatTime(item.createtime) }}</span>
              <span>申报</span>
            </div>
            <div v-if="item.status === 0" style="color: burlywood">未提交</div>
            <div v-if="item.status === 1" style="color: blue">审批中</div>
            <div v-if="item.status === 2" style="color: green">已通过</div>
            <div v-if="item.status === 3" style="color: red">已驳回</div>
            <div v-if="item.status === 4" style="color: darkgray">已取消</div>
          </div>
          <div class="row2">事由：{{ item.comment }}</div>
          <div class="row3">
            <div v-for="(course, index2) in item.courses" :key="index2">
              <div class="row3-item">
                <span>
                  代课{{ item.courses.length > 1 ? index2 + 1 : '' }}：
                </span>
                [
                <ww-open-data :openid="course.srcUserid" type="userName" />
                ->
                <ww-open-data :openid="course.tarUserid" type="userName" />
                ]
                {{ getCourseDesc(course) }}
              </div>
            </div>
          </div>
        </div>
        <div v-if="total > 0" class="item">
          <div class="nomore">没有更多了</div>
        </div>
        <div v-if="list.length == 0" class="item">
          <div class="nomore">暂无数据</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    gradeOptions,
    claszOptions,
    coursetimeOptions,
    subjectOptions,
  } from '@/config'
  import router from '@/router'
  import { useUserStore } from '@/store/modules/user'
  import { getList, doDelete } from '@/api/dksb'
  import { formatTime } from '@/utils'
  import { ArrowLeft } from '@element-plus/icons-vue'
  import longPress from '@/utils/longpress'
  export default defineComponent({
    name: 'Dksblist',
    directives: { longPress },
    setup() {
      // const router = useRouter()
      const userStore = useUserStore()
      // const { corpId, userId } = storeToRefs(userStore)
      const { corpId, userId } = userStore
      console.log(userId)

      const state = reactive({
        list: [],
        total: 0,
        listLoading: true,
        showSelect: false,
        selectRows: [],
        queryForm: {
          corpId: corpId,
          reqUserid: null,
          blurry: null,
          status: null,
          createtimeFrom: null,
          createtimeTo: null,
          srcUserid: null,
          tarUserid: null,
          eventdateFrom: null,
          eventdateTo: null,
          grade: null,
          clasz: null,
          subject: null,
          coursetime: null,
          offset: 0,
          pageSize: 10,
        },
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const handleEdit = (row) => {
        if (row.id) {
          // state['editRef'].showEdit(row)
        } else {
          // state['editRef'].showEdit()
        }
      }
      const handleDelete = (row) => {
        if (row.id) {
          proxy.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete([row.id])
            proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id)
            proxy.$baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete(ids)
              proxy.$baseMessage(
                msg ? msg : '删除完毕',
                'success',
                'vab-hey-message-success'
              )
              await fetchData()
            })
          } else {
            proxy.$baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }

      const fetchData = async (refresh = false) => {
        if (refresh) {
          state.total = 0
          state.queryForm.offset = 0
        } else {
          if (state.total > 0) return
          state.queryForm.offset = state.list.length
        }
        state.listLoading = true
        const { data: list } = await getList(state.queryForm)
        if (refresh) {
          state.list = list
        } else {
          if (list.length < state.queryForm.pageSize) {
            state.total = state.list.length + list.length
          }
          state.list.push(...list)
        }
        state.listLoading = false
      }

      const getCourseDesc = (course) => {
        const { eventdate, grade, clasz, coursetime, subject } = course
        return `${getOptLabel(
          subjectOptions,
          subject
        )} / ${eventdate} / ${getOptLabel(
          coursetimeOptions,
          coursetime
        )} / ${getOptLabel(gradeOptions, grade)} / ${getOptLabel(
          claszOptions,
          clasz
        )} `
      }

      const getOptLabel = (options, value) => {
        let label = ''
        options.some((op) => {
          if (op.value === value) {
            label = op.label
            return true
          }
          if (op.children) {
            label = getOptLabel(op.children, value)
            if (label) return true
          }
        })
        return label
      }

      const showDetail = (item) => {
        console.log(item)
        router
          .push({ path: `/manager/dksbdetail/${item.thirdNo}` })
          .then(() => {})
      }

      const longPress = (e, data) => {
        state.showSelect = !state.showSelect
        e.preventDefault()
        console.log('longPress detect。。。。', data)
      }

      const goBack = () => {
        router.go(-1)
      }

      const handSelect = (thirdNo) => {
        const { selectRows } = state
        let index = -1
        const has = selectRows.some((e, i) => {
          if (e == thirdNo) {
            index = i
          }
          return index > -1
        })
        if (has) {
          selectRows.splice(index, 1)
        } else {
          selectRows.push(thirdNo)
        }
      }

      const handchange = (value, thirdNo) => {
        const { selectRows } = state
        if (value) {
          //选中
          selectRows.push(thirdNo)
          state.selectRows = selectRows
        } else {
          //取消
          state.selectRows = selectRows.filter((e) => {
            return thirdNo != e
          })
        }
      }

      onMounted(() => {
        fetchData(true)
      })

      return {
        ...toRefs(state),
        fetchData,
        setSelectRows,
        handleEdit,
        handleDelete,
        getCourseDesc,
        longPress,
        handSelect,
        handchange,
        formatTime,
        showDetail,
        ArrowLeft,
        goBack,
      }
    },
  })
</script>
<style lang="scss">
  html {
    height: 100%;
    body {
      margin: 0;
      height: 100%;
      #app {
        margin: 0;
        height: 100%;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .index-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .detailheader {
      height: 58px;
      line-height: 58px;
      border-bottom: 1px var(--el-border-color) var(--el-border-style);
    }
    .page-list {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      .item {
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        border-bottom: 1px var(--el-border-color) var(--el-border-style);
        &:hover {
          background-color: ghostwhite;
        }
        .row1 {
          display: inline-flex;
          justify-content: space-between;
          align-items: flex-start;
          flex: 0 0 auto;
          font-size: var(--el-font-size-base);
          color: var(--el-text-color-regular);
          height: 32px;
          line-height: 32px;

          .row1-1 {
            & > * {
              margin-right: 15px;
            }
          }
        }
        .row2 {
          font-size: 12px;
          color: #b1b3b8;
          line-height: 24px;
        }
        .row3 {
          display: flex;
          flex-direction: column;
          .row3-item {
            font-size: 12px;
            color: #b1b3b8;
            line-height: 24px;
          }
        }
        .nomore {
          font-size: 14px;
          color: #b1b3b8;
          line-height: 32px;
          text-align: center;
        }
      }
    }
  }
</style>
